<template>
  <el-dialog
    :title="title"
    :visible.sync="isVisible"
    :width="width"
    :before-close="handleClose"
    :lock-scroll="true"
    :close-on-click-modal="false"
    custom-class="pub_dialog"
    @open="getData"
  >
    <VForm
      ref="vformComponents"
      :form="formData.form"
      :options="formData.options"
      :rules="formData.rules"
      :labelWidth="formData.labelWidth"
      :rowspan="rowspan"
      @changeAddress="changeAddress"
      @changeGdArea="changeGdArea"
    ></VForm>

    <div class="formTitle-root">
      <div class="form-title-p">处置信息</div>
    </div>
    <VForm
      ref="vformComponents2"
      :form="formData2.form"
      :options="formData2.options"
      :labelWidth="formData2.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <div class="formTitle-root" v-show="isExamine">
      <div class="form-title-p">事故案例审核</div>
    </div>
    <VForm
      v-show="isExamine"
      ref="vformComponents1"
      :form="formData1.form"
      :options="formData1.options"
      :labelWidth="formData1.labelWidth"
      :rowspan="rowspan"
    ></VForm>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="sure" v-if="openType!='detail'">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { collectBuildingProjectList } from '@/api/build/project'
  import { riskAccidentCasesDetail,
    riskAccidentCasesUpdate,
    riskAccidentCasesAdd } from '@/api/risk/accidentCases'
  import { riskAccidentCasesReasonList } from '@/api/risk/riskAccidentReason'
  import VForm from "@/components/VForm/index";
  export default {
    components: {
      VForm,
    },
    props: {
      width: {
        type: String,
        default: "70%",
      },
      title: {
        type: String,
        default: "详情",
      },
      id:{},
      openType:{
        type:String,
        default:"add"
      },
      dialogVisible: {
        type: Boolean,
        default: false
      },
      isExamine:{
        type: Boolean,
        default:false
      },
    },
    watch: {
      'width': {
        handler(newVal, oldVal) {
          console.log('newVal===',newVal, oldVal)
          let w = this.width.split('%')[0]
          if(w>=60){
            this.rowspan = 2
          }else{
            this.rowspan = 1
          }
        },
        deep: true,
        immediate: true
      },
      'typeOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='type'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'levelOptions':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key=='level'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'examineResultOptions':{
        handler(newVal, oldVal) {
          this.formData1.options.forEach(t=>{
            if(t.key=='examineResult'){
              t.option.data = newVal
            }
          })
        },
        deep: true,
        immediate: true
      },
      'formData.form.mapData':{
        handler(newVal, oldVal) {
          console.log(" this.formData.areaCode ", this.formData.form.areaCode )
          if(newVal){
            let temp = []
            temp.push(newVal.towncode.substr(0,2).padEnd(12,'0'))
            let cityCode = newVal.towncode.substr(0,4).padEnd(12,'0')
            temp.push(cityCode)
            let subIndex = this.getCountySubIndex(cityCode)
            temp.push(newVal.towncode.substr(0,subIndex).padEnd(12,'0'))
            this.formData.form.areaCode = temp
            console.log(" this.formData.areaCode ", this.formData.form.areaCode )
          }
        },
        deep: true,
        immediate: true
      },
      'typeOptions':{
        handler(newVal, oldVal) {
          console.log("newVal=======>",newVal)
          if(newVal){
            this.typeOptionsFormat = newVal.map(t=>{
              let name = JSON.parse(t.name)
              return { label: t.label, value: name.value, children: name.children}
            })
          }
        },
        deep: true,
        immediate: true
      },
      'typeOptionsFormat':{
        handler(newVal, oldVal) {
          this.formData.options.forEach(t=>{
            if(t.key == "type"){
              t.option.data =  this.typeOptionsFormat
            }
          })
        },
        deep: true,
        immediate: true
      },
      'sourceOptions':{
        handler(newVal, oldVal) {
          if(newVal){
            this.formData.options.forEach(t=>{
              if(t.key == "source"){
                t.option.data =  newVal
              }
            })
          }
        },
        deep: true,
        immediate: true
      },
      'statusOptions':{
        handler(newVal, oldVal) {
          if(newVal){
            this.formData.options.forEach(t=>{
              if(t.key == "status"){
                t.option.data = newVal
              }
            })
          }
        },
        deep: true,
        immediate: true
      },
      "formData.form.type":{
        handler(newVal, oldVal) {
          console.log("type====watch",newVal)
          // 监测非道路类型排除面积
          if(newVal && newVal.toString()!="3,31"){
            this.formData.options = this.formDataOptionTemp.filter(t=>t.key!="accidentArea" && t.key!="accidentVolume")
          }else {
            this.formData.options = this.formDataOptionTemp
          }
          // 获取事故原因分类
          if(newVal){
            riskAccidentCasesReasonList({type:newVal}).then(res=>{
              if(res.code==200){
                this.reasonOptions = res.data
                this.formData.options.forEach(t=>{
                  if(t.key == "reason"){
                    t.option.data =  this.reasonOptions
                  }
                })
              }
            })
          }
        },
        deep: true,
        immediate: true
      },
      'openType':{
        handler(newVal, oldVal) {
          // 判断是否详情，添加不可编辑标识
          this.formData.options.forEach(t=>{
            t.disabled = newVal=='detail' || this.isExamine ? true : false
          })
          this.formData1.options.forEach(t=>{
            t.disabled = newVal=='detail' ? true : false
          })
          this.formData2.options.forEach(t=>{
            t.disabled = newVal=='detail' || this.isExamine ? true : false
          })
        },
        deep: true,
        immediate: true
      },
      'buildProjectList':{
        handler(newVal, oldVal) {
          if(newVal){
            this.formData.options.forEach(t=>{
              if(t.key == "buildingId"){
                t.option.data = newVal
              }
            })
          }
        },
        deep: true,
        immediate: true
      },
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    data() {
      return {
        rowspan:1,
        dict:{},
        formData2:{
          form:{
            handleProcess:"",
            disposeUnit:"",
            disposePerson:"",
            closeCaseTime:"",
            disposeContact:"",
            // isSetCase:"",
            experience:"",
            disposePic:[]
          },
          options:[
            {
              title: "处置过程",
              key: "handleProcess",
              type: "textarea",
              columnWidth:'w100',
              disabled:false
            },
            {
              title: "处置单位",
              key: "disposeUnit",
              type: "text",
              disabled:false
            },
            {
              title: "处置负责人",
              key: "disposePerson",
              type: "text",
              disabled:false
            },
            {
              title: "处置完成时间",
              key: "closeCaseTime",
              type: "date",
              disabled:false
            },
            {
              title: "处置负责人联系方式",
              key: "disposeContact",
              type: "text",
              disabled:false
            },
            // {
            //   title: "是否设置为案例",
            //   key: "isSetCase",
            //   type: "radio",
            //   option: {
            //     data: [{id:0,label:'否',value:0},{id:1,label:'是',value:1}],
            //     props: {
            //       key: "id", // 指定key对应data的字段
            //       label: "label", // 指定label对应data的字段
            //       value: "value", // 指定value对应data的字段
            //     },
            //   },
            //   disabled:false
            // },
            {
              title: "经验教训",
              key: "experience",
              type: "textarea",
              columnWidth:'w100',
              disabled:false
            },
            {
              title: "处置图片",
              key: "disposePic",
              type: "file",
              fileType: "image",
              listType: "picture-card",
              uploadTextTip: "",
              columnWidth: 'w100max',
              disabled:false
            },
          ],
          labelWidth: "140px",
        },
        formData1:{
          form:{
            examineResult:"",
            examineOption:"",
          },
          options:[
            {
              title: "审核结果",
              key: "examineResult",
              type: "select",
              multiple:false,
              option: {
                data: this.examineResultOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "审核意见",
              key: "examineOption",
              type: "textarea",
              columnWidth:'w100'
            },
          ],
          labelWidth: "140px",
        },
        formDataOptionTemp:[
          // {
          //   title: "标识码",
          //   key: "flagCode",
          //   type: "text",
          // },
          {
            title: "所属工地",
            key: "buildingId",
            type: "select",
            multiple:false,
            option: {
              data: this.buildProjectList,
              props: {
                key: "id", // 指定key对应data的字段
                label: "projectName", // 指定label对应data的字段
                value: "id", // 指定value对应data的字段
              },
            },
          },
          {
            title: "事故案例名称",
            key: "name",
            type: "text",
          },

          {
            title: "事故状态",
            key: "status",
            type: "select",
            multiple:false,
            option: {
              data: this.statusOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "value", // 指定value对应data的字段
              },
            },
          },
          {
            title: "事件摘要",
            key: "eventSummary",
            type: "text",
          },
          {
            title: "级别",
            key: "level",
            type: "select",
            multiple:false,
            option: {
              data: this.levelOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "value", // 指定value对应data的字段
              },
            },
          },
          // {
          //   title: "事故来源",
          //   key: "source",
          //   type: "select",
          //   multiple:false,
          //   option: {
          //     data: this.sourceOptions,
          //     props: {
          //       key: "id", // 指定key对应data的字段
          //       label: "label", // 指定label对应data的字段
          //       value: "value", // 指定value对应data的字段
          //     },
          //   },
          // },
          {
            title: "发现时间",
            key: "occurTime",
            type: "date",
          },
          {
            title: "上报单位",
            key: "reportUnit",
            type: "text",
          },
          {
            title: "上报人员",
            key: "reportPerson",
            type: "text",
          },
          {
            title: "人员联系方式",
            key: "reportContact",
            type: "text",
          },
          {
            title: "责任单位",
            key: "responseUnit",
            type: "text",
          },
          {
            title: "责任人",
            key: "responsePerson",
            type: "text",
          },
          {
            title: "责任人联系方式",
            key: "responseContact",
            type: "text",
          },
          {
            title: "引发原因",
            key: "reason",
            type: "textarea",
            columnWidth: 'w100max'
          },
          {
            title: "事件行政区划",
            key: "areaCode",
            type: "gdAreaSelect",
          },
          {
            title: "事发地址",
            type:'mapPosition',
            key:'mapData',
          },
          {
            title: "受伤人数",
            key: "injuredNum",
            type: "text",
          },
          {
            title: "死亡人数",
            key: "deadNum",
            type: "text",
          },
          {
            title: "失踪人数",
            key: "missingNum",
            type: "text",
          },
          {
            title: "财产损失",
            key: "directLosses",
            type: "text",
          },
          {
            title: "事故面积",
            key: "accidentArea",
            type: "text",
          },
          {
            title: "事故体积",
            key: "accidentVolume",
            type: "text",
          },
          {
            title: "现场图片",
            key: "scenePic",
            type: "file",
            fileType: "image",
            listType: "picture-card",
            uploadTextTip: "",
          },
          {
            title: "相关文件材料",
            key: "file",
            type: "file",
            fileType:"file",
            listType:"text",
            uploadTextTip:""
          },
          {
            title: "备注",
            key: "remark",
            type: "textarea",
            columnWidth: 'w100max'
          },
        ],
        formData: {
          form: {
            flagCode:"",
            status:"",
            name:"",
            type:"",
            eventSummary:"",
            level:"",
            source:"",
            occurTime:"",
            reportUnit:"",
            reportPerson:"",
            reportContact:"",
            responseUnit:"",
            responsePerson:"",
            responseContact:"",
            areaCode:"",
            reason:"",
            mapData:null,
            injuredNum:"",
            deadNum:"",
            missingNum:"",
            directLosses:"",
            accidentArea:"",
            accidentVolume:"",
            scenePic:[],
            file:[],
            remark:"",
            buildingId:""
          },
          options: [
            {
              title: "标识码",
              key: "flagCode",
              type: "text",
            },
            {
              title: "事故状态",
              key: "status",
              type: "select",
              multiple:false,
              option: {
                data: this.statusOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "事故案例名称",
              key: "name",
              type: "text",
            },
            {
              title: "分类",
              key: "type",
              type: "cascader",
              option: {
                data: this.typeOptionsFormat,
                props: {
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "事件摘要",
              key: "eventSummary",
              type: "text",
            },
            {
              title: "级别",
              key: "level",
              type: "select",
              multiple:false,
              option: {
                data: this.levelOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "事故来源",
              key: "source",
              type: "select",
              multiple:false,
              option: {
                data: this.sourceOptions,
                props: {
                  key: "id", // 指定key对应data的字段
                  label: "label", // 指定label对应data的字段
                  value: "value", // 指定value对应data的字段
                },
              },
            },
            {
              title: "发现时间",
              key: "occurTime",
              type: "date",
            },
            {
              title: "上报单位",
              key: "reportUnit",
              type: "text",
            },
            {
              title: "上报人员",
              key: "reportPerson",
              type: "text",
            },
            {
              title: "人员联系方式",
              key: "reportContact",
              type: "text",
            },
            {
              title: "责任单位",
              key: "responseUnit",
              type: "text",
            },
            {
              title: "责任人",
              key: "responsePerson",
              type: "text",
            },
            {
              title: "责任人联系方式",
              key: "responseContact",
              type: "text",
            },
            {
              title: "事件行政区划",
              key: "areaCode",
              type: "gdAreaSelect",
            },
            {
              title: "引发原因",
              key: "reason",
              type: "text",
            },
            {
              title: "事发地址",
              type:'mapPosition',
              key:'mapData',
            },
            {
              title: "受伤人数",
              key: "injuredNum",
              type: "text",
            },
            {
              title: "死亡人数",
              key: "deadNum",
              type: "text",
            },
            {
              title: "失踪人数",
              key: "missingNum",
              type: "text",
            },
            {
              title: "财产损失",
              key: "directLosses",
              type: "text",
            },
            {
              title: "事故面积",
              key: "accidentArea",
              type: "text",
            },
            {
              title: "事故体积",
              key: "accidentVolume",
              type: "text",
            },
            {
              title: "现场图片",
              key: "scenePic",
              type: "file",
              fileType: "image",
              listType: "picture-card",
              uploadTextTip: "",
            },
            {
              title: "相关文件材料",
              key: "file",
              type: "file",
              fileType:"file",
              listType:"text",
              uploadTextTip:""
            },
            {
              title: "备注",
              key: "remark",
              type: "textarea",
              columnWidth: 'w100max'
            },
          ],
          rules: {
            name :[
              { required: true, message: '请输入', trigger: 'blur' },
              {max:64, message: '长度最大为64个字符', trigger: 'blur'}
            ],
          },
          labelWidth: "140px",
        },
        // 字典
        typeOptions:[],
        typeOptionsFormat:[],
        levelOptions:[],
        examineResultOptions:[],
        statusOptions:[],
        sourceOptions:[],
        reasonOptions:[],
        buildProjectList:[]
      };
    },
    methods: {
      changeTypeSelect(){
        this.formData.form.reason= ''
      },
      changeAddress(data){
        console.log("changeAddress=====>",data)
        this.formData.form.mapData = data
        this.formData.form.areaCode = data.areaCode
      },
      changeGdArea(data){
        console.log("changeGDArea=====>",data)
      },
      initData(){
          this.formData.form.flagCode = "",
          this.formData.form.status = "",
          this.formData.form.name = "",
          this.formData.form.type = "",
          this.formData.form.eventSummary = "",
          this.formData.form.level = "",
          this.formData.form.source = "",
          this.formData.form.occurTime = "",
          this.formData.form.reportUnit = "",
          this.formData.form.reportPerson = "",
          this.formData.form.reportContact = "",
          this.formData.form.responseUnit = "",
          this.formData.form.responsePerson = ""
          this.formData.form.responseContact = ""
          this.formData.form.areaCode = "",
          this.formData.form.reason = "",
          this.formData.form.mapData = null,
          this.formData.form.injuredNum = "",
          this.formData.form.deadNum = "",
          this.formData.form.missingNum = "",
          this.formData.form.directLosses = "",
          this.formData.form.accidentArea = "",
          this.formData.form.accidentVolume = ""
          this.formData.form.scenePic = [],
          this.formData.form.file = [],
          this.formData.form.remark = "",
          this.formData.form.buildingId = ""

          this.formData1.form.examineResult = "",
          this.formData1.form.examineOption = "",
          this.formData2.form.handleProcess = "",
          this.formData2.form.disposeUnit = "",
          this.formData2.form.disposePerson = "",
          this.formData2.form.closeCaseTime = "",
          this.formData2.form.disposeContact = "",
          this.formData2.form.isSetCase = "",
          this.formData2.form.experience="",
          this.formData2.form.disposePic = []
      },
      getCountySubIndex(cityCode){
        // 中山、东莞截取10位
        let filterList = ['442000000000','441900000000']
        if(filterList.findIndex(t=>t==cityCode)>-1){
          return 10;
        }
        return 6;
      },
      positionSubmitFormat(){
        let mapData = this.formData.form.mapData
        if(mapData){
          this.formData.form.lon = mapData.gpsX
          this.formData.form.lat = mapData.gpsY
          this.formData.form.occurAddr = mapData.address
          this.formData.form.areaCode = mapData.towncode
          if(mapData.towncode){
            this.formData.form.provinceCode = mapData.towncode.substr(0,2).padEnd(12,'0')
            this.formData.form.cityCode = mapData.towncode.substr(0,4).padEnd(12,'0')
            let subIndex = this.getCountySubIndex(this.formData.form.cityCode)
            this.formData.form.countyCode = mapData.towncode.substr(0,subIndex).padEnd(12,'0')
          }
        }
        if(Array.isArray(this.formData.form.areaCode) &&  this.formData.form.areaCode[0] == ''){
          console.log("赋值空", this.formData.form.areaCode)
          this.formData.form.areaCode = null
        }
      },
      positionLoadFormat(){
        let form = this.formData.form
        let mapData = {}
        mapData.address = form.occurAddr
        mapData.gpsX = parseFloat(form.lon)
        mapData.gpsY = parseFloat(form.lat)
        mapData.towncode = form.areaCode
        this.formData.form.mapData = mapData
        this.formData.form.areaCode = [form.provinceCode,form.cityCode,form.countyCode]
        console.log("mpap",mapData)
      },
      submitFormat(){
        this.formData.form.file = JSON.stringify(this.formData.form.file)
        if(this.formData.form.type){
          this.formData.form.largeType = this.formData.form.type[0]
          this.formData.form.type = this.formData.form.type.toString()
        }
        this.formData.form.scenePic = JSON.stringify( this.formData.form.scenePic)
        this.formData2.form.disposePic = JSON.stringify( this.formData2.form.disposePic)
      },
      loadFormat(){
        this.formData.form.file  = this.formData.form.file ? JSON.parse(this.formData.form.file) : []
        if(this.formData.form.type){
          this.formData.form.type = this.formData.form.type.split(",")
        }
        if(this.formData.form.scenePic!=null && this.formData.form.scenePic!='' && this.formData.form.scenePic!='null'){
          this.formData.form.scenePic = JSON.parse( this.formData.form.scenePic ).map(item=>{
            return{
              name:item.name,
              url: process.env.VUE_APP_BASE_API + 'file/api/download/'+item.fileId,
              uid: item.uuid,
              fileId: item.fileId,
            }
          })
        }else {
          this.formData.form.scenePic = []
        }
        if(this.formData2.form.disposePic!=null && this.formData2.form.disposePic!='' && this.formData2.form.disposePic!='null'){
          this.formData2.form.disposePic = JSON.parse( this.formData2.form.disposePic ).map(item=>{
            return{
              name:item.name,
              url: process.env.VUE_APP_BASE_API + 'file/api/download/'+item.fileId,
              uid: item.uuid,
              fileId: item.fileId,
            }
          })
        }else {
          this.formData2.form.disposePic = []
        }
      },
      sure(){
        console.log('sure===',this.formData.form)
        this.$refs.vformComponents.$refs.form.validate().then(res=>{
          this.submitFormat()
          this.positionSubmitFormat()
          if(this.openType == "add"){
            this.add()
          }else{
            this.update()
          }
        })
      },
      add(){
        this.formData.form.id = null
        let data = {
          ...this.formData.form,
          ...this.formData1.form,
          ...this.formData2.form
        }
        riskAccidentCasesAdd(data).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.createSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      update(){
        let data = {
          ...this.formData.form,
          ...this.formData1.form,
          ...this.formData2.form
        }
        riskAccidentCasesUpdate(data).then(res=>{
          if(res.code==200){
            this.$message({
              message: this.$t('tips.updateSuccess'),
              type: 'success'
            })
            this.closeSuccess()
          }else{
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        })
      },
      cancel(){
        this.close()
      },
      handleClose(done) {
        done()
        this.close()
      },
      closeSuccess(){
        this.initData()
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$refs.vformComponents1.$refs.form.resetFields();
        this.$refs.vformComponents2.$refs.form.resetFields();
        this.$emit('success')
      },
      close(){
        this.initData()
        this.$refs.vformComponents.$refs.form.resetFields();
        this.$refs.vformComponents1.$refs.form.resetFields();
        this.$refs.vformComponents2.$refs.form.resetFields();
        this.$emit('close')
      },
      getBuildProjectList(){
        collectBuildingProjectList().then(res=>{
           if(res.code==200){
             this.buildProjectList = res.data
           }
        })
      },
      getData(){
        // 获取工地项目列表
        this.getBuildProjectList()
        this.typeOptions = []
        this.$commonJs.filterDataDict("riskAccidentCasesType",this.typeOptions)
        this.levelOptions = []
        this.$commonJs.filterDataDict("riskAccidentCasesLevel",this.levelOptions)
        this.examineResultOptions = []
        this.$commonJs.filterDataDict("riskAccidentCasesExamineResult",this.examineResultOptions)
        this.statusOptions = []
        this.$commonJs.filterDataDict("riskAccidentStatus",this.statusOptions)
        this.sourceOptions = []
        this.$commonJs.filterDataDict("riskAccidentSource",this.sourceOptions)
        if(this.openType!="add"){
          riskAccidentCasesDetail(this.id).then(res=>{
            if(res.code==200){
              this.formData.form = res.data
              this.formData.form.level = res.data.level ?  parseInt(res.data.level) : res.data.level
              this.formData1.form.examineResult = res.data.examineResult ?
                parseInt(res.data.examineResult) :  res.data.examineResult
              this.formData1.form.examineOption = res.data.examineOption
              this.formData2.form.handleProcess = res.data.handleProcess,
                this.formData2.form.disposeUnit = res.data.disposeUnit,
                this.formData2.form.disposePerson = res.data.disposePerson,
                this.formData2.form.closeCaseTime = res.data.closeCaseTime,
                this.formData2.form.disposeContact = res.data.disposeContact,
                // this.formData2.form.isSetCase = res.data.isSetCase,
                this.formData2.form.experience=res.data.experience,
                this.formData2.form.disposePic = res.data.disposePic
              this.loadFormat()
              this.positionLoadFormat()
            }else{
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          })
        }
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import "@/styles/element-variables.scss";
  .formTitle-root{
    padding: 10px 0;
    border-bottom: 1px solid #EFEFEF;
    font-size: 16px;
    position: relative;
    margin-bottom: 5px;
    .form-title-p{
      padding-left: 10px;
      border-left: 4px solid $--color-primary;
    }
  }
</style>
